<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/tool/top/_20240323222417.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/tool/top/_20240323222429.png" mode="" class="nav-bar-bg2"></image>
        <image src="/static/home/group54.png" mode="" class="nav-bar-bg3"></image>
      <text class="nav-title1">猫语校园</text>
      <text class="nav-title2">校园猫语，趣享喵生活</text>
    </view>
    
    <view class="cat-id" @click="gotoCatCard()">
      <view class="cat-id-title">
        <text class="cat-id-text1">猫咪名片</text>
        <text class="cat-id-text2">查看属于你的高校名片</text>
      </view>
      <view class="cat-id-right">
        <image src="/static/home/catId/sub9.png" mode="" class="cat-id-pic1"></image >
        <image src="/static/home/catId/path19.png" mode="" class="cat-id-pic2"></image >
        <image src="/static/home/catId/ellipse10.png" mode="" class="cat-id-pic3"></image >
        <image src="/static/home/catId/ellipse9.png" mode="" class="cat-id-pic4"></image >
        <image src="/static/home/catId/ellipse11.png" mode="" class="cat-id-pic5"></image  >
        <image src="/static/home/catId/cat4.png" mode="" class="cat-id-pic6"></image  >
        <image src="/static/home/catId/ellipse8.png" mode="" class="cat-id-pic7"></image  >
        <image src="/static/home/catId/sub8.png" mode="" class="cat-id-pic8"></image >
      </view>
    </view>
  
  <view class="cat-article">
    <view class="cat-article-top">
      <view class="cat-article-top-left">
        <image src="/static/home/rectangle31.png" mode=""></image>
        <text>文章推荐</text>
      </view>
      <view class="cat-article-top-right" @click="gotoAll()">
        <text>查看更多</text>
        <image src="/static/home/right1_right-one.png" mode=""></image>
      </view>
    </view>
    <view class="cat-article-main">
      <view class="cat-article-box" v-for="(item,i) in articleList" :key="item.id">
        <my-article :item='item'></my-article>
      </view>
     
     
    </view>
  </view>
  </view>
  
</template>

<script>
  import {getArticleList} from '../../api/article.js'
  export default {
    data() {
      return {
        articleList:[],
        queryObj: {
              
              pageNum: 1,
              
              pageSize: 6,
              module:0
            }
      };
    },
    onLoad(){
      this.getArticleList()
    },
    methods:{
      async getArticleList(){
        const {data:data} = await getArticleList(this.queryObj)
        console.log(data);
        console.log(data.data.articles);
        this.articleList = data.data.articles
        console.log(this.articleList[0]);
        console.log(this.articleList[0].imgs[0]);
        console.log(this.articleList[0].title);
      },
      gotoAll(){
        uni.navigateTo({
          url: '/subpkg/all-article/all-article'
        })
      },
      gotoCatCard(){
        uni.navigateTo({
          url: '/subpkg/cat-card/cat-card'
        })
      }
      
      
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 540rpx; 
    
  .nav-bar-bg1 {
    position: absolute;
    top: 0;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: -35;
    left: -3;
    width: 308rpx;
    height: 300rpx;
  }
  .nav-bar-bg3{
    position: absolute;
    width: 729rpx;
    height: 200rpx;
    top: 192rpx;
    left: 7rpx;
  }
  .nav-title1 {  
    position: absolute;
    font-size: 30px;
    font-weight: bold;  
    color: #3A3A3A;  
    top: 228rpx;
    left: 50rpx;
    z-index: 999;
  }
  .nav-title2{
    position: absolute;
    font-size: 20px;
    color: #707070;
    top: 330rpx;
    left: 50rpx;
    z-index: 999;
  }
}  

.cat-id{
  background-image: url('~@/static/home/catId/path25.png');
  background-repeat: no-repeat;
  width: 710rpx;
  height: 292rpx;
  margin-left: 19rpx;
  margin-top: -133rpx;
  .cat-id-title{
    display: flex;
    flex-direction: column;
     padding-top: 80rpx;
     padding-left: 80rpx;
    .cat-id-text1{
      font-size: 26px;
      font-weight: bold;
      color: #3A3A3A;
      margin-bottom: 20rpx;
    }
    .cat-id-text2{
      font-size: 16px;
      color: #7E7E7E;
    }
  }
  .cat-id-right{
    position: relative;
    margin-top:  -100rpx;
    .cat-id-pic1{
      position: absolute;
      width: 136rpx;
      height: 74rpx;
      top: -98rpx;
      left: 30rpx;
    }
    .cat-id-pic2{
      position: absolute;
      width: 280rpx;
      height: 210rpx;
      top: -95rpx;
      left: 392rpx;
    }
    .cat-id-pic3{
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      top: -74rpx;
      left: 564rpx;
    }
    .cat-id-pic4{
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      top: -40rpx;
      left: 466rpx;
    }
    .cat-id-pic5{
      position: absolute;
      width: 10rpx;
      height: 10rpx;
      top: 50rpx;
      left: 590rpx;
    }
    .cat-id-pic6{
      position: absolute;
      width: 194rpx;
      height: 258rpx;
      top: -78rpx;
      left: 460rpx;
      z-index: 8;
    }
    .cat-id-pic7{
      position: absolute;
      width: 150rpx;
      height: 30rpx;
      top: 144rpx;
      left: 464rpx;
      z-index: 1;
    }
    .cat-id-pic8{
      position: absolute;
      width: 705rpx;
      height: 62rpx;
      top: 130rpx;
      left: 10rpx;
    }
  }
}

.cat-article{
  margin-top: 45px;
  margin-left: 20px;
  margin-right: 30px;
  .cat-article-top{
    display: flex;
    justify-content: space-between;
    
    .cat-article-top-left{
      display: flex;
      justify-content: space-between;
      align-items: center;
      image{
        width: 12rpx;
        height: 48rpx;
        margin-right: 10px;
      }
      text{
        font-size: 19px;
        font-weight: bold;
        color: #6E6E6E;
      }
    }
    .cat-article-top-right{
      display: flex;
      justify-content: space-between;
      align-items: center;
      text{
        font-size: 12px;
        color: #6E6E6E;
        margin-right: 2px;
      }
      image{
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
   
  .cat-article-main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .cat-article-box{
      width: 320rpx;
      height: 406rpx;
      margin: 15px 0;
      border-radius-top-left: 10px;
      border-radius-top-right: 10px;
      image{
        width: 320rpx;
        height: 338rpx;
      }
      .cat-article-box-title{
        width: 320rpx;
        height: 68rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFFDFB;
        border-radius-bottom-left: 10px;
        border-radius-bottom-right: 10px;
        text{
          font-size: 11px;
          color: #383838;
          white-space: nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
